<template>
  <div class="mychecking">
    <div class="header"><span>我的审批</span></div>
    <div class="box">
      <div class="box_div">
        <div>
          <el-input
            v-model="proposer"
            style="width: 200px"
            placeholder="请输入内容"
          ></el-input>
          <el-button type="primary" @click="inquireFun">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
        <div>
          <el-button type="primary" @click="batchFun">批量审批</el-button>
        </div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="proposer" label="申请人" width="150">
          </el-table-column>
          <el-table-column prop="evection" label="请假事由" width="120">
          </el-table-column>
          <el-table-column prop="leaveTime" label="请假开始时间" width="120">
            <template #default='scope'>
              {{$filters.currencyUSD(scope.row.leaveTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="请假结束时间" width="120">
            <template #default='scope'>
              {{$filters.currencyUSD(scope.row.endTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="needTime" label="总需时长" width="120">
          </el-table-column>
          <el-table-column prop="place" label="出发地址" width="120">
          </el-table-column>
          <el-table-column prop="goOut" label="到达地址" width="120">
          </el-table-column>
          <el-table-column prop="vehicle" label="交通工具" width="120">
          </el-table-column>
          <el-table-column prop="peer" label="同行人员" width="·120">
          </el-table-column>
          <el-table-column prop="approval" label="审批人" width="·120">
          </el-table-column>
          <el-table-column prop="send" label="抄送人员" width="·120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  >同意</el-button
                >
              </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive,ref, toRefs} from 'vue';
import {list} from '../../api/leave/leave'
import {useStore} from 'vuex'
export default {
  data() {
    return {};
  },
  setup() {
    const store=useStore()
    const {name}=toRefs(store.state.modules)
    const input=ref('')
    const limit = ref(8);
    const page = ref(1);
    const proposer = ref("");
    const tableData=reactive([])
    const listFun = () => {
      console.log(name._object.name);
      list({
        limit: limit.value,
        page: page.value,
        proposer: proposer.value,
      }).then((res) => {
        tableData.splice(0,tableData.length)
        let arr=[]
        if (res.status == 200) {
          res.data.map((v,i) => {
            arr=v.approval.split(',')
            arr.forEach(j => {
              if(j===name._object.name){
                tableData.push(v);
              }
            });
          });
        }
      });
    };
    listFun();
    const handleClick=(row)=>{
      console.log(row);
    }
    const inquireFun =()=>{
      listFun();
    }
    const reset = ()=>{
      proposer.value=''
      listFun();
    }
    
    const batchFun= ()=>{

    }
    return {
      input,
      tableData,
      reset,
      inquireFun,
      batchFun,
      handleClick,
      proposer,
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/scss.scss";
.mychecking {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box{
  width: 100%;
  background: white;
  .box_div{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.header {
  width: 100%;
  height: 30px;
  border-left: $border-left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    margin-left: 15px;
  }
}
</style>